<template>
	<div class="panel-container">
		<el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin">
			<el-tab-pane name="componentLib">
				<template #label>
					<span> 组件库 </span>
				</template>
				<el-scrollbar
					class="side-scroll-bar"
					:style="{ height: scrollerHeight }"
				>
					<el-collapse v-model="activeNames" class="widget-collapse">
						<el-collapse-item name="1" title="容器组件">
							<draggable
								tag="ul"
								:list="containers"
								item-key="key"
								:group="{ name: 'dragGroup', pull: 'clone', put: false }"
								ghost-class="ghost"
								:sort="false"
								@end="onWidgetDragEnd"
							>
								<template #item="{ element: ctn }">
									<li class="container-widget-item" :title="ctn.displayName">
										<span>
											<svg-icon
												:icon-class="ctn.icon"
												class-name="color-svg-icon"
											/>
											{{ ctn.label }}
										</span>
									</li>
								</template>
							</draggable>
						</el-collapse-item>

						<el-collapse-item name="2" title="数据组件">
							<draggable
								tag="ul"
								:list="basicFields"
								item-key="key"
								:group="{ name: 'dragGroup', pull: 'clone', put: false }"
								ghost-class="ghost"
								:sort="false"
								@end="onDataWidgetDragEnd"
							>
								<template #item="{ element: fld }">
									<li class="field-widget-item" :title="fld.displayName">
										<span>
											<svg-icon
												:icon-class="fld.icon"
												class-name="color-svg-icon"
											/>
											{{ fld.type }}
										</span>
									</li>
								</template>
							</draggable>
						</el-collapse-item>

						<el-collapse-item name="3" title="业务组件">
							<draggable
								tag="ul"
								:list="advancedFields"
								item-key="key"
								:group="{ name: 'dragGroup', pull: 'clone', put: false }"
								ghost-class="ghost"
								:sort="false"
								@end="onBusinessWidgetDragEnd"
							>
								<template #item="{ element: fld }">
									<li class="field-widget-item" :title="fld.displayName">
										<span>
											<svg-icon
												:icon-class="fld.icon"
												class-name="color-svg-icon"
											/>
											{{ fld.type }}
										</span>
									</li>
								</template>
							</draggable>
						</el-collapse-item>

						<el-collapse-item name="4" title="其他组件">
							<draggable
								tag="ul"
								:list="customFields"
								item-key="key"
								:group="{ name: 'dragGroup', pull: 'clone', put: false }"
								ghost-class="ghost"
								:sort="false"
								@end="onOtherWidgetDragEnd"
							>
								<template #item="{ element: fld }">
									<li class="field-widget-item" :title="fld.displayName">
										<span>
											<svg-icon
												:icon-class="fld.icon"
												class-name="color-svg-icon"
											/>
											{{ fld.type }}
										</span>
									</li>
								</template>
							</draggable>
						</el-collapse-item>
					</el-collapse>
				</el-scrollbar>
			</el-tab-pane>

			<el-tab-pane name="formLib" style="padding: 8px">
				<template #label>
					<span> 模板库 </span>
				</template>
				<el-scrollbar
					class="side-scroll-bar"
					:style="{ height: scrollerHeight }"
				>
					<template v-for="(ft, idx) in formTemplate" :key="idx">
						<el-card
							:bord-style="{ padding: '0' }"
							shadow="hover"
							class="ft-card"
						>
							<el-popover placement="right" trigger="hover" width="auto">
								<template #reference>
									<img :src="ft.imgUrl" style="width: 200px" />
								</template>
								<img :src="ft.imgUrl" style="height: 600px; width: 720px" />
							</el-popover>
							<div class="bottom clear-fix">
								<span class="ft-title">#{{ idx + 1 }} {{ ft.title }}</span>
								<el-button
									link
									type="primary"
									class="right-button"
									@click="loadFormTemplate(ft.jsonUrl)"
								>
									加载此模版
								</el-button>
							</div>
						</el-card>
					</template>
				</el-scrollbar>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits } from 'vue'
import Draggable from '@/../lib/vuedraggable/dist/vuedraggable.umd.js'
import {
	containers as CONS,
	basicFields as BFS,
	advancedFields as AFS,
	customFields as CFS
} from './widgetsConfig'
import { formTemplates } from './templatesConfig'
import SvgIcon from '@/components/svg-icon/index'

defineOptions({
	name: 'FieldPanel'
})

const emits = defineEmits(['onDragEnd'])

const firstTab = ref('componentLib')
const activeNames = ref(['1', '2', '3', '4'])
const scrollerHeight = ref(0)
const containers = ref([])
const basicFields = ref([])
const advancedFields = ref([])
const customFields = ref([])
const formTemplate = formTemplates

onMounted(() => {
	// 动态计算左侧组件区域可视高度
	scrollerHeight.value = window.innerHeight - 56 - 48 + 'px'
	// 动态初始化组件数据
	initCompData()
})

const handleFieldWidgetClone = () => {}
const initCompData = () => {
	containers.value = CONS
	basicFields.value = BFS
	advancedFields.value = AFS
	customFields.value = CFS
}

/**
 * 其他组件拖拽结束
 */
const onOtherWidgetDragEnd = (evt: any) => {
	emits('onDragEnd', evt, '4')
}

/**
 * 业务组件拖拽结束
 */
const onBusinessWidgetDragEnd = (evt: any) => {
	emits('onDragEnd', evt, '3')
}

/**
 * 数据组件拖拽结束
 */
const onDataWidgetDragEnd = (evt: any) => {
	emits('onDragEnd', evt, '2')
}

/**
 * 容器组件拖拽结束
 */
const onWidgetDragEnd = (evt: any) => {
	emits('onDragEnd', evt, '1')
}
</script>

<style lang="scss" scoped>
.color-svg-icon {
	-webkit-font-smoothing: antialiased;
	color: #7c7d82;
}

.side-scroll-bar {
	:deep(.el-scrollbar__wrap) {
		overflow-x: hidden;
	}
}

div.panel-container {
	padding-bottom: 10px;
}

.no-bottom-margin :deep(.el-tabs__header) {
	margin-bottom: 0;
}

.indent-left-margin {
	:deep(.el-tabs__nav) {
		margin-left: 20px;
	}
}

.el-collapse-item :deep(ul) > li {
	list-style: none;
}

.widget-collapse {
	border: none;
	padding: 0 10px;

	:deep(.el-collapse-item__header) {
		font-style: italic;
		font-weight: bold;
	}

	:deep(.el-collapse-item__content) {
		padding-bottom: 6px;

		ul {
			padding-left: 0; /* 重置IE11默认样式 */
			margin: 0; /* 重置IE11默认样式 */
			margin-block-start: 0;
			margin-block-end: 0.25em;
			padding-inline-start: 0;

			&:after {
				content: '';
				display: block;
				clear: both;
			}

			.container-widget-item,
			.field-widget-item {
				display: inline-block;
				height: 32px;
				line-height: 32px;
				width: 96px;
				float: left;
				margin: 2px 6px 6px 0;
				cursor: move;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				background: #fff;
				border: 1px solid #e8e9eb;
				border-radius: 4px;
				padding: 0 8px;
			}

			.container-widget-item:hover,
			.field-widget-item:hover {
				background: #f1f2f3;
				border-color: #409eff;

				.color-svg-icon {
					color: #409eff;
				}
			}

			.drag-handler {
				position: absolute;
				top: 0;
				left: 160px;
				background-color: #dddddd;
				border-radius: 5px;
				padding-right: 5px;
				font-size: 11px;
				color: #666666;
			}
		}
	}
}

.el-card.ft-card {
	border: 1px solid #8896b3;
}
:deep(.el-popover) {
	width: auto !important;
}

.ft-card {
	margin-bottom: 10px;

	.bottom {
		margin-top: 10px;
		line-height: 12px;
	}

	/*
    .image-zoom {
      height: 500px;
      width: 620px
    }
    */

	.ft-title {
		font-size: 13px;
		font-weight: bold;
	}

	.right-button {
		padding: 0;
		float: right;
	}

	.clear-fix:before,
	.clear-fix:after {
		display: table;
		content: '';
	}

	.clear-fix:after {
		clear: both;
	}
}
</style>
